<template>
    <div class="achievement-list-page">
        <el-card shadow="never" class="mt-4">
            <el-form
                ref="form"
                :model="form"
                :inline="true"
                v-if="!isCompanyAccount()"
                @submit.native.prevent="onSubmit">
                <el-form-item label="关键词" prop="keyword">
                    <el-input
                    v-model="form.keyword"
                    placeholder="搜索企业名称与账号" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="企业账号状态" prop="adminAccountStatus">
                    <el-select
                        v-model="form.adminAccountStatus"
                        placeholder="企业账号状态"
                        class="input-width">
                        <el-option
                            v-for="(item, i) in accountStatus"
                            :key="i"
                            :label="item"
                            :value="i + 1"/>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="onResetForm">重置</el-button>
            </el-form>
            <el-button type="primary" @click="onAddClick" v-if="!isCompanyAccount()">新增</el-button>
            <div class="mt-3" v-loading="loading">
                <el-table :data="data">
                    <el-table-column type="index"
                    :index="indexMethod"
                    align="center"
                    label="序号"
                    width="50"/>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="账号" prop="account"></el-table-column>
                    <el-table-column label="员工账号数量">
                        <template slot-scope="{row}">
                            {{ row.used_count + " / " + row.active_count + " / " + row.count }}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="{row}">
                            {{ row.status | statusFilter }}
                        </template>
                    </el-table-column>
                    <el-table-column label="企业账号状态">
                        <template slot-scope="{row}">
                            {{ accountStatus[row.admin_account_status - 1] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" prop="admin_account"/>
                    <el-table-column label="创建时间">
                        <template slot-scope="{row}">
                            {{ formatTime(row.created_at) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button
                                type="text"
                                @click="onEditClick(row)">编辑</el-button>
                            <el-button
                                type="text"
                                @click="onAccountSetClick(row)">账号配额</el-button>
                            <el-button
                                type="text"
                                @click="onResetClick(row)">重置密码</el-button>
                            <el-button
                                v-if="! isCompanyAccount()"
                                :type="row.status === 1 ? 'primary' : 'success'"
                                @click="onStatusClick(row)">
                                    {{ row.status === 1 ? '冻结' : '恢复' }}</el-button>
                            <el-button
                                v-if="!isCompanyAccount()"
                                type="text"
                                @click="onDeleteClick(row)"
                                class="red-color">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="totalElements > 1" class="footer">
                <pagination
                ref="pagination"
                :currentPage="form.page"
                :pageSize="form.size"
                :handleCurrentChange="onCurrentChange"
                :handlePageSizeChange="onPageSizeChange"
                :totalElements="totalElements"
                ></pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Pagination from '../../components/base/Pagination';
import TimeFormats from '../../helpers/TimeFormats';
import IndexNumber from '../../helpers/IndexNumber';

export default {
    components: {
        Pagination,
    },
    mixins: [require('../../mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            form: {
                page: 1,
                size: 50,
                keyword: '',
                adminAccountStatus: '',
            },
            totalElements: 0,
            accountStatus: ['短期使用', '首次付费', '续约付费', '长期赠送', '测试赠送'],
        };
    },
    filters: {
        statusFilter: function (value) {
            if (!value) return '';
            const options = ['有效', '无效'];
            return options[(value - 1)];
        },
    },
    methods: {
        formatTime(timestamp) {
            return timestamp ? new TimeFormats().convertTime('YYYY-MM-DD', timestamp) : '';
        },
        isCompanyAccount() {
            return this.$store.state.my.company_id > 0;
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            API.get('company', {
                params: this.form,
            }).then((res) => {
                this.data = res.content;
                this.totalElements = res.pagination.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        onAccountSetClick({id}) {
            this.$router.push({
                name: 'AccountManage',
                params: { id: id },
            });
        },
        onEditClick({id}) {
            this.$router.push({
                name: 'CompanyManage.Add',
                params: { id: id },
            });
        },
        onAddClick() {
            this.$router.push({
                name: 'CompanyManage.Add',
            });
        },
        onDeleteClick({id}) {
            $ele.$confirm('是否删除此企业', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`company/${id}`, {
                }).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onStatusClick(row) {
            const content = row.status === 1 ? '是否冻结此企业账号' : '是否解除此企业账号冻结状态';
            const requestStatus = row.status === 1 ? 2 : 1;
            $ele.$confirm(content, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.put(`company/status/${row.id}`, {status: requestStatus}).then(() => {
                    $ele.$message.success('操作成功');
                    this.fetchData();
                }).finally(() => {
                    this.loading = false;
                });
            }).catch(() => { });
        },
        onResetClick({id}) {
            API.put(`company/reset/${id}`).then((res) => {
                $ele.$confirm(`重置密码成功，当前账号的登陆密码是${res}`, '提示', {
                    confirmButtonText: '确定',
                    type: 'warning',
                });
            });
        },
        onResetForm() {
            this.onResetFilters();
            this.fetchData();
        },
        indexMethod(index) {
            return new IndexNumber()
                .getIndex(this.totalElements, this.form.page, this.form.size, index);
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.achievement-list-page {
    .filter {
        .input-width {
            max-width: 200px;
        }
    }
    .logo {
        width: 60px;
        height: 60px;
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
    }
}
</style>
